<template>
  <div class="modal-wrapper" :class="wrapperShow">
    <div class="modal-dialog" :class="contentShow">
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button @click="hide()">asd</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        wrapperShow: 'hideWindow',
        contentShow: ''
      }
    },
    methods: {
      hide () {
        this.wrapperShow = 'hideWindow'
      },
      show () {
        this.wrapperShow = 'showWindow'
      }
    },
    watch: {
      'wrapperShow' (newValue, oldValue) { // 监控个体变化
        setTimeout(() => {
          this.contentShow = newValue === 'showWindow' ? 'showContent' : 'hideContent'
        }, 200)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/style/common.styl";
  @import "login.styl";
</style>
